<template>
    <div class="users">
        <!-- 用户列表 -->
        <table>
            <tr v-for="(item, index) in users" :key="index">
                <td class="w1">
                    <img :src="item.avatarUrl" alt="" @click="$router.push(`/user/${item.userId}`)">
                </td>
                <td class="w2">
                    <div class="name ellipsis">
                        <span class="nickname ellipsis" :title="item.nickname" @click="$router.push(`/user/${item.userId}`)" v-html="highlight(item.nickname)"></span>
                        <em class="icon">
                            <img class="vip" src="@/assets/images/public/vip.png" alt="" v-show="item.vipType">
                            <img class="new" src="@/assets/images/public/new.png" alt="" v-show="item.anchor">
                            <i :class="{'male':item.gender==1}"></i>
                            <i :class="{'female':item.gender==2}"></i>
                        </em>
                    </div>
                    <div class="dec ellipsis" v-html="highlight(item.signature)"></div>
                </td>
                <div class="w3">
                    <a class="btn">
                        <span>关注</span>
                    </a>
                </div>
                <div class="w4">
                    性别：{{ item.gender==0?"未知":item.gender==1?"男":"女" }}
                </div>
                <div class="w5">
                    <span v-if="item.city!==100 & item.province!==1000000">
                        地区：{{ [item.province, item.city] | showPlace }}
                    </span>
                    <span v-else-if="item.city==100">
                        地区：台北市
                    </span>
                    <span v-else-if="item.province==1000000">
                        地区：海外
                    </span>
                </div>
            </tr>
        </table>
    </div>
</template>

<script>
import { UserSearchApi } from "@/request/api";
import { regionData, CodeToText} from "element-china-area-data"
export default {
    data () {
        return {
            users: [],
        }
    },
    filters: {
        showPlace: function(value) {
            //value是省市区类似id 返回数组 [110000,110100,110101]，可以当发到后端存储，回显数据
	        //汉字
            if (value[1] != null && value[2] != null) {
            var dz =
                CodeToText[value[0]] +
                '-' +
                CodeToText[value[1]] +
                '-' +
                CodeToText[value[2]]
            } else if (value[1] != null) {
                dz = CodeToText[value[0]] + '-' + CodeToText[value[1]] 
            } else {
                dz = CodeToText[value[0]]
            }
            return dz
        }
    },
    computed: {
        keyword() {
            return this.$route.params.keyword;
        }
    },
    watch: {
        keyword: {
            handler(newValue, oldValue){
                if(newValue !== oldValue){
                    UserSearchApi(newValue).then((res) => {
                        // console.log(res);
                        this.users = res.data.result.userprofiles;
                    });
                }
            },
            immediate: true,
        }
    },
    // created() {
    //     UserSearchApi(this.keyword).then((res) => {
    //         // console.log(res);
    //         this.users = res.data.result.userprofiles;
    //     });
    // },
    methods: {
        highlight(str) {
            // 正则表达式//中间的字符只是字符串
            // 如果需要动态创建一个正则表达式
            // new RegExp(str, rules) str是正则字符串，rules是匹配模式写在字符串中
            const reg = new RegExp(this.keyword, 'gi')
            const highStr = str.replace(reg, `<span style="color: #0c73c2;">${this.keyword}</span>`)
            return highStr
        },
    }
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.users {
    table {
        tr {
            width: 918px;
            height: 60px;
            display: flex;
            align-items: center;
            font-size: 12px;
            &:nth-of-type(even) {
                background: #f7f7f7;
            }
            &:nth-of-type(odd) {
                background: #fff;
            }
            &:hover {
                background-color: #f1f1f1;
                border: 1px solid #d3d3d3;
            }
        }
        td {
            padding: 5px 10px;
            height: 50px;
            line-height: 50px;
        }
        .w1 {
            width: 50px;
            img {
                cursor: pointer;
                width: 50px;
                height: 50px;
            }
        }
        .w2 {
            width: 460px;
            height: 50px;
            line-height: 18px;
            .name {
                width: 100%;
                height: 18px;
                font-size: 14px;
                color: #333;
                margin: 5px 0 0;
                .nickname {
                    &:hover {
                        cursor: pointer;
                        text-decoration: underline;
                    }
                }
                .icon {
                    .vip {
                        margin: 0 0 0 5px;
                        width: 15px;
                        height: 15px;
                        display: inline-block;
                    }
                    .new {
                        margin: 0 0 0 5px;
                        width: 15px;
                        height: 15px;
                        display: inline-block;
                    }
                    .male {
                        margin: 0 0 0 5px;
                        width: 15px;
                        height: 15px;
                        display: inline-block;
                        background: url("@/assets/images/public/icon.png") no-repeat -70px -20px;
                    }
                    .female {
                        margin: 0 0 0 5px;
                        width: 15px;
                        height: 15px;
                        display: inline-block;
                        background: url("@/assets/images/public/icon.png") no-repeat -70px 0;
                    }
                }
            }
            .dec {
                width: 100%;
                font-size: 12px;
                color: #999;
                margin: 5px 0 0;
            }
        }
        .w3 {
            width: 130px;
            .btn {
                width: 64px;
                height: 27px;
                display: block;
                background: url("@/assets/images/public/button.png") no-repeat;
                background-position: 0 -990px;
                &:hover {
                    cursor: pointer;
                    background-position: 0 -1020px;
                }
            }
            span {
                font-size: 12px;
                color: #5d5d5d;
                line-height: 27px;
                padding: 0 0 0 26px;
            }
        }
        .w4 {
            width: 120px;
            font-size: 12px;
            color: #999;
            line-height: 18px;
        }
        .w5 {
            width: 120px;
            font-size: 12px;
            color: #999;
            line-height: 18px;
        }
    }
}
</style>